<template>
  <div class="data-statistics v-flex">
    <el-row>
      <el-col v-loading="loading.loading1">
        <div class="col-title" style="display:flex;">
          <p style="flex:1;"><i class="el-icon-s-data" />危树 月度数据</p>
          <el-dropdown class="dept-select">
            <span class="el-dropdown-link">
              {{ checkvalue.deptName }}<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="item in selectSection"
                :key="item.id"
                :style="{color:checkvalue.deptName===item.deptName?'#409eff':''}"
                @click.native="selectClick(item)">{{ item.deptName }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div id="chart-one" class="col-div" />
      </el-col>
    </el-row>
    <el-row>
      <el-col v-loading="loading.loading2">
        <p class="col-title"><i class="el-icon-s-data" />危树 线路年度数据</p>
        <div id="chart-two" class="col-div" />
      </el-col>
    </el-row>
    <el-row>
      <el-col v-loading="loading.loading3">
        <p class="col-title"><i class="el-icon-s-data" />危树 线路区站缺陷发生排行榜（前10）</p>
        <div id="chart-three" class="col-div" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getListSection } from '@/api/cms/detect-data/basic'
import { defectsSpecialAnalysis, siteDefectTop, lineDefectYear } from '@/api/cms/data-statistics'
import echarts from 'echarts'
export default {
  name: 'TreesStatistics',
  components: {
  },
  data() {
    return {
      checkvalue: {
        deptName: '广州铁路局',
        typeClass: '3', // 缺陷来源  检测
        deptId: ''
      },
      clickNum: 0, // 有数据得缺陷统计加载太慢，判断接口返回结果使用
      timer: null,
      tabshow: true,
      selectSection: [{ deptName: '广州铁路局', deptId: '' }],
      loading: {
        loading1: false,
        loading2: false,
        loading3: false
      },
      myChart: null,
      myChart2: null,
      myChart3: null,
      myresize: null
    }
  },
  computed: {
    ...mapGetters(['sidebar'])
  },
  watch: {
    'sidebar.opened': function(val) {
      var that = this
      setTimeout(function() {
        that.myChart.resize()
        that.myChart2.resize()
        that.myChart3.resize()
      }, 500)
    },
    'checkvalue.deptId': function(val) {
      this.clickNum++
      this.tabClick(val, this.clickNum)
    }
  },
  mounted() {
    var that = this
    this.timer = setTimeout(function() {
      that.tabshow = false
    }, 5000)
    getListSection().then(res => {
      if (res.data) {
        this.selectSection = this.selectSection.concat(res.data)
      }
    })
    this.tabClick()

    // 监听屏幕变化，改变echarts尺寸
    const _this = this
    this.myresize = window.addEventListener('resize', function() {
      _this.$nextTick(_ => {
        if (_this.myChart)_this.myChart.resize()
        if (_this.myChart2)_this.myChart2.resize()
        if (_this.myChart3)_this.myChart3.resize()
      })
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.myresize)
    this.initChart()
  },
  methods: {
    initChart() {
      if (this.myChart) {
        this.myChart.dispose()
        this.myChart = null
      }
      if (this.myChart2) {
        this.myChart2.dispose()
        this.myChart2 = null
      }
      if (this.myChart3) {
        this.myChart3.dispose()
        this.myChart3 = null
      }
    },
    selectClick(item) {
      this.checkvalue.deptName = item.deptName
      this.checkvalue.deptId = item.id
    },
    tabClick(val, num = 0) {
      const obj = {
        deptId: val || '',
        dicValue: 'QXLX05517'
      }
      this.initChart()
      // 危树月度数据
      this.defectsSpecialAnalysis(obj)
      // 区站缺陷发生排行榜
      this.siteDefectTop(obj)
      // 线路年度数据展示
      this.lineDefectYear(obj)
    },
    // 危树月度数据
    defectsSpecialAnalysis(obj) {
      this.loading.loading1 = true
      defectsSpecialAnalysis(obj).then(res => {
        this.loading.loading1 = false
        if (!res.data) return
        var keys = Object.keys(res.data)
        const option = {
          title: {
            text: this.checkvalue.deptName,
            textStyle: {
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: keys
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: keys[0],
              type: 'bar',
              stack: 'bird',
              data: res.data[keys[0]]
            },
            {
              name: keys[1],
              type: 'bar',
              stack: 'bird',
              data: res.data[keys[1]]
            },
            {
              name: keys[2],
              type: 'bar',
              stack: 'bird',
              data: res.data[keys[2]]
            }
          ]
        }
        const chart = echarts.init(document.getElementById('chart-one'), 'light')
        this.myChart = chart
        chart.setOption(option)
      }).catch(_ => {
        this.loading.loading1 = false
      })
    },
    // 线路年度数据展示
    lineDefectYear(obj) {
      this.loading.loading2 = true
      lineDefectYear(obj).then(res => {
        this.loading.loading2 = false
        if (!res.data) return
        var xAxis = Object.keys(res.data)

        var legend = []
        res.data[xAxis[0]].forEach(item => {
          legend.push(item.lineName)
        })
        var series = []

        legend.forEach((child, index) => {
          var serie = {
            name: child,
            type: 'line',
            data: [res.data[xAxis[0]][index].count, res.data[xAxis[1]][index].count, res.data[xAxis[2]][index].count]
          }
          series.push(serie)
        })
        const option = {
          title: {
            text: this.checkvalue.deptName,
            textStyle: {
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'axis',
            position: function(point, params, dom, rect, size) {
              return [point[1], 0]
            }
          },
          legend: {
            data: legend,
            width: '80%',
            type: 'scroll'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: xAxis
          },
          yAxis: {
            type: 'value'
          },
          series: series
        }
        const chart = echarts.init(document.getElementById('chart-two'), 'light')
        this.myChart2 = chart
        chart.setOption(option)
      }).catch(_ => {
        this.loading.loading2 = false
      })
    },
    // 线路年度数据展示
    siteDefectTop(obj) {
      this.loading.loading3 = true
      siteDefectTop(obj).then(res => {
        this.loading.loading3 = false
        if (!res.data) res.data = { sortSite: [] }
        var keys = Object.keys(res.data)
        keys = keys.splice(0, keys.length - 1)
        var xkeys = res.data.sortSite
        var series = []
        keys.forEach(item => {
          var serie = {
            name: item,
            type: 'bar',
            stack: 'bird',
            data: res.data[item]
          }
          series.push(serie)
        })
        const option = {
          title: {
            text: this.checkvalue.deptName,
            textStyle: {
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: keys
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: xkeys
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: series
        }
        const chart = echarts.init(document.getElementById('chart-three'), 'light')
        this.myChart3 = chart
        chart.setOption(option)
      }).catch(_ => {
        this.loading.loading3 = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.data-statistics{
  background: rgb(212, 212, 212);
  padding: 6px;
  overflow-y: auto;

  .el-row{
    flex: 1;
    display: flex;
    min-height: 250px;
    .el-col{
      background: white;
      .col-div{
        padding: 0 8px;
        height:calc(100% - 42px);
        width:100%;
      }
    }
    .el-col:not(:last-child){
      margin-right: 8px;
    }
  }
  .el-row:not(:last-child){
    padding-bottom: 8px;
  }
}
.col-title{
  height: 34px;
  line-height: 34px;
  padding-left: 10px;
  font-weight: bold;
  text-align: left;
  font-size: 15px;
  margin-bottom: 6px;
  color: white;
  background:linear-gradient(180deg,#409eff,#64b1ff);
  .dept-select{
    margin-right: 16px;
    color: white;
    cursor: pointer;
  }
  .dept-select:hover{
      transform: scale(1.04,1.04);
    }
}

.el-icon-s-data{
  margin-right: 10px;
  font-size: 18px;
}
</style>
